<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!-- 
        总结：M - Model层是管理数据的地方
              VM - View-model层 是Vue实例  负责Model层和View层的数据交互   也就是View实例
               V - View 层就是页面 
 
        1.插值函数可以直接使用Vue实例中的方法和属性 
        2.Model层的数据会以属性的形式挂载在View实例上
     -->

    <div id="root">
        <!-- View 层 -->
        <h1>Hello,bady {{peanut}}</h1>
        <h2>测试一下：{{_c}}</h2>
        <h2>测试一下1：{{$off}}</h2>
        <h2>测试一下2：{{$emit}}</h2>
    </div>
</body>
<script>    
    const vm = new Vue({  //ViewModel 层 
        el:"#root",
        data:{
            peanut:"小花生"   //Model 层
        }
    })

    console.log(vm);
</script>
</html>